<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList webapp</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .table th {
            text-align: center;
        }

        .table tr td {
            text-align: center;
        }

        .table tr td:nth-child(2) {
            text-align: left;
        }

        .table tr td {
            line-height: 26px;
        }

        .table tr td .edit {
            display: block;
            width: 100%;
            height: auto;
            line-height: 26px;
            border: none;
            background-color: transparent;
            border-bottom: 1px solid #ccc;
        }

        .table tr td span {
            display: block;
            width: 100%;
            line-height: 26px;
        }

        .table tr td .edit:focus {
            outline: none;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <div class="page-header">
            <h3>使用H5 本地存储 打造一个ToDoList 应用</h3>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="input-group"><span class="input-group-addon">输入待办事项</span> 
                    <input type="text" id="title" v-model="txt" @keydown.enter="addTodo"
                        class="form-control">
                    <div class="input-group-btn"><button id="addBtn" class="btn btn-success" @click="addTodo">添加</button></div>
                </div>
            </div>
        </div>
        <hr>
        <div class="btn-group filter-status">
                 <button class="btn btn-info" @click="currentShowStatus=2">全部</button>
                 <button class="btn btn-success" @click="currentShowStatus=1">已完成</button>
                 <button class="btn btn-primary" @click="currentShowStatus=0">未完成</button>
        </div>
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th width="10%">编号</th>
                    <th width="45%">标题</th>
                    <th width="15%">时间</th>
                    <th width="10%">状态</th>
                    <th width="20%">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr :class="{success:item.status==1}" v-for="(item , index) in showTodoList" :key="index">
                    <td>{{ index+1 }}</td>
                    <td @dblclick="edit(item.id)">
                        <span v-if="index != currentEidtIndex">{{ item.title }}</span>
                        <input type="text" v-focus class="edit" v-else v-model="caches[item.id]" @keydown.enter="confirmEdit(item.id)">
                    </td>
                    <td>{{ item.time | datetime('YYYY年MM月DD日 HH:mm:ss') }}</td>
                    <td><span :class="['glyphicon', item.status==1?'glyphicon-ok':'glyphicon-time']"></span></td>
                    <td><button 
                        :class="['btn', 'btn-sm', item.status==1?'btn-primary':'btn-success']"
                        @click="changeStatus(item.id)"
                        >{{item.status==1?'标记未完成':'标记已完成'}}</button> <button
                            class="btn btn-sm btn-danger" @click="removeTodo(item.id)">删除</button></td>
                </tr>
                <tr v-if="showTodoList.length<1"><td colspan="5" style="line-height: 160px; background-color: rgb(249, 249, 249); color: rgb(153, 153, 153);">您目前暂无制定的todo计划.</td></tr>
            </tbody>
        </table>
    </div>
    <script src="js/vue.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="js/app.js"></script>
</body>

</html>